<template>
	<view class="content">
		<view class="body">
			<up-navbar :title="t('Operating bank cards')" @leftClick="goWithdraw" :autoBack="true">
				<template #left>
				  <view class="nav-back-btn">
				    <image class="back-icon" src="../../../static/img/left.png"></image>
				  </view>
				</template>
			</up-navbar>
			
			<view class="top">
				<u-form>
					<u-form-item>
						<u-input v-model="baseData.cardForm.ifsc" class="custom-input" inputAlign="right"
							:placeholder="t('Please select bank')" @click="showBankSelector">
							<template #prefix>
								<up-text :text="t('Select Bank')" margin="0 3px 0 0" size="15"></up-text>
							</template>
							<template #suffix>
								<up-icon name="arrow-right" size="1rem"></up-icon>
							</template>
						</u-input>
					</u-form-item>

					<u-form-item>
						<u-input v-model="baseData.cardForm.account_num" pattern="^\d+$" class="custom-input"
							inputAlign="right" :placeholder="t('Please Enter')">
							<template #prefix>
								<up-text :text="t('Account Number')" margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item>
						<u-input v-model.trim="baseData.cardForm.holder_name" class="custom-input" inputAlign="right"
							:placeholder="t('Please Enter')">
							<template #prefix>
								<up-text :text="t('Account Holder Name')" margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item>
						<u-input v-model.trim="baseData.cardForm.accEmail" class="custom-input" inputAlign="right"
							:placeholder="t('Please Enter')">
							<template #prefix>
								<up-text :text="t('Email')" margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item>
						<u-input v-model.trim="baseData.cardForm.acc_phone" class="custom-input" inputAlign="right"
							:placeholder="t('Please Enter')">
							<template #prefix>
								<up-text :text="t('Account Phone')" margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item>
				</u-form>
			</view>
		</view>
		
		<up-popup :show="showBankPopup" v-model="baseData.cardForm.bankName" mode="bottom" border-radius="10" class="custom-width-bottom">
			<view class="bank-popup">
				<view class="bank-popup-header">
					<text class="bank-popup-title">Select Bank</text>
					<view class="bank-popup-close" @click="closeBankPopup">
						<up-icon name="close" size="1.5rem"></up-icon>
					</view>
				</view>

				<scroll-view scroll-y="true" class="bank-list" style="max-height: 60vh;">
					<view class="bank-item" v-for="(bank, index) in bankName" :key="index" @click="selectBank(bank)">
						{{ bank.label }}
					</view>
				</scroll-view>
			</view>
		</up-popup>
		<view class="btn" @click="addBank"><view class="btn-text">{{t('Save')}}</view></view>
		<a :href="baseData.aircraftUrl" target="_blank">
			<img style="width: 2rem;
				height: 2rem;
				position: fixed;
				bottom: 30vh;
				right:6px;
				z-index: 99999;" src="@/static/teltgram.png" />
		</a>
	</view>

</template>

<script setup lang="ts">
	import { useI18n } from 'vue-i18n';
	import { onMounted, reactive, ref } from 'vue'
	import { setBankCard, bankCardInfo } from '@/api/user'
	// import bankName from '@/utils/nigeria.js';

	const { t } = useI18n();
	const baseData = reactive({
		aircraftUrl: uni.getStorageSync('aircraftUrl'),
		cardForm: {
			ifsc: null,
			holder_name: null,
			account_num: null,
			country:3,
			ac_type:1  ,
			platform:3,
			acc_phone:null,
			accEmail:''
		}
	})
const bankName = ref([
  { label: "OPAY(PAYCOM)", value: "NGN001" },
  { label: "PalmPay", value: "NGN002" },
  { label: "Access Bank", value: "NGN003" },
  { label: "Ecobank Nigeria", value: "NGN004" },
  { label: "Enterprise Bank", value: "NGN005" },
  { label: "Fidelity Bank", value: "NGN006" },
  { label: "First Bank of Nigeria", value: "NGN007" },
  { label: "First City Monument Bank", value: "NGN008" },
  { label: "Globus Bank", value: "NGN009" },
  { label: "Jaiz Bank", value: "NGN010" },
  { label: "Keystone Bank", value: "NGN011" },
  { label: "Kuda Bank", value: "NGN012" },
  { label: "One Finance", value: "NGN013" },
  { label: "Parallex Bank", value: "NGN014" },
  { label: "Polaris Bank", value: "NGN015" },
  { label: "Providus Bank", value: "NGN016" },
  { label: "Stanbic IBTC Bank", value: "NGN017" },
  { label: "Standard Chartered Bank", value: "NGN018" },
  { label: "Sterling Bank", value: "NGN019" },
  { label: "Suntrust Bank", value: "NGN020" },
  { label: "Sparkle Microfinance Bank", value: "NGN021" },
  { label: "TAJ Bank", value: "NGN022" },
  { label: "Union Bank of Nigeria", value: "NGN023" },
  { label: "United Bank For Africa", value: "NGN024" },
  { label: "Unity Bank", value: "NGN025" },
  { label: "VFD Microfinance Bank", value: "NGN026" },
  { label: "Wema Bank", value: "NGN027" },
  { label: "Zenith Bank", value: "NGN028" },
  { label: "Moniepoint Microfinance Bank", value: "NGN029" },
  { label: "9 Payment Service Bank", value: "NGN001" },
  { label: "ABBEY MORTGAGE BANK", value: "NGN002" },
  { label: "ACCESS BANK PLC", value: "NGN003" },
  { label: "AccessMobile", value: "NGN004" },
  { label: "ACCION MICROFINANCE BANK", value: "NGN005" },
  { label: "ADDOSSER MICROFINANCE BANK", value: "NGN006" },
  { label: "AG MORTGAGE BANK PLC", value: "NGN007" },
  { label: "AL", value: "NGN008" },
  { label: "AMJU UNIQUE MICROFINANCE BANK", value: "NGN009" },
  { label: "AMML MFB", value: "NGN010" },
  { label: "ASO SAVINGS AND LOANS", value: "NGN011" },
  { label: "BAINES CREDIT MFB", value: "NGN012" },
  { label: "Boctrust Microfinance Bank", value: "NGN013" },
  { label: "BOWEN MICROFINANCE BANK", value: "NGN014" },
  { label: "BRENT MORTGAGE BANK", value: "NGN015" },
  { label: "CELLULANT", value: "NGN016" },
  { label: "CEMCS MICROFINANCE BANK", value: "NGN017" },
  { label: "CENTRAL BANK OF NIGERIA", value: "NGN018" },
  { label: "ChamsMobile", value: "NGN019" },
  { label: "CIT MICROFINANCE BANK", value: "NGN020" },
  { label: "Citibank Nigeria LTD", value: "NGN021" },
  { label: "CONSUMER MICROFINANCE BANK", value: "NGN022" },
  { label: "CONTEC GLOBAL INFOTECH LIMITED (NOWNOW)", value: "NGN023" },
  { label: "Coronation Merchant Bank", value: "NGN024" },
  { label: "Covenant", value: "NGN025" },
  { label: "CREDIT AFRIQUE MICROFINANCE BANK", value: "NGN026" },
  { label: "DAYLIGHT MICROFINANCE BANK", value: "NGN027" },
  { label: "DIAMOND BANK PLC", value: "NGN028" },
  { label: "Eartholeum", value: "NGN029" },
  { label: "ECOBANK NIGERIA PLC", value: "NGN030" },
  { label: "EcoMobile", value: "NGN031" },
  { label: "EKONDO MICROFINANCE BANK", value: "NGN032" },
  { label: "EMPIRE TRUST BANK", value: "NGN033" },
  { label: "eTranzact", value: "NGN034" },
  { label: "Fairmoney Microfinance", value: "NGN035" },
  { label: "FAST MICROFINANCE BANK", value: "NGN036" },
  { label: "FBN Mortgages Limited", value: "NGN037" },
  { label: "FBNMobile", value: "NGN038" }
])

	  const showBankPopup = ref(false);
  // 
  const showBankSelector = () => {
    showBankPopup.value = true;
  }
  
  
  
  const closeBankPopup = () => {
    showBankPopup.value = false;
  }
  
  
  const selectBank = (bank) => {
    baseData.cardForm.ifsc = bank.label; 
    showBankPopup.value = false;
  }
  
	const getBankLabel = (ifscCode:any) => {
		const bank = bankName.value.find(item => item.value === ifscCode);

		return bank ? bank.label : null;
	};

	const getBankValue = (ifscCode:any) => {

		const bank = bankName.value.find(item => item.label === ifscCode);

		return bank ? bank.value : null;
	};
  const createDefaultCardForm = ref({
    ifsc: null,
    holder_name: null,
    account_num: null,
    country: 2,
    acc_phone: null,
    ac_type: 1,
    platform: 1,
    ext: { accEmail: null }
  })
	const addBank = async () => {
		if (!baseData.cardForm.account_num) {
			uni.showToast({
				title: t('Please fill in') + t('Account Number'),
				icon: "none"
			})
			return
		}
		const regex = /^\d+$/
		if (!regex.test(baseData.cardForm?.account_num)) {
			uni.showToast({
				title: t('account must be numeric'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.holder_name) {
			uni.showToast({
				title: t('Please fill in') + t('Account Holder Name'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.ifsc) {
			uni.showToast({
				title: t('Please fill in') + 'ifsc',
				icon: "none"
			})
			return
		}
		const holder_nameregex = /^[A-Za-z\s]+$/;
		if (!holder_nameregex.test(baseData.cardForm?.holder_name)) {
			uni.showToast({
				title: t('Account name error'),
				icon: "none"
			})
			return
		}
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
		if (!emailRegex.test(baseData.cardForm.accEmail)) {
			uni.showToast({
				title: t('Invalid Email Format'),
				icon: 'none',
			})
			return
		}
		if (!baseData.cardForm.acc_phone) {
					uni.showToast({
						title: t('Please fill in') + t('Phone'),
						icon: "none"
					})
					return
				}
		baseData.cardForm.holder_name = baseData.cardForm.holder_name?.replace(/\s*/g, '');
		baseData.cardForm.country=3;
		baseData.cardForm.ac_type=1;
		const ifscCode = baseData.cardForm.ifsc;
		baseData.cardForm.ifsc = getBankValue(ifscCode);
		// 1) 
		Object.assign(
		  createDefaultCardForm.value,
		  (({ ac_type, country, holder_name, acc_phone, ifsc, account_num,platform }) =>
		    ({ ac_type, country, holder_name, acc_phone, ifsc, account_num ,platform}))(baseData.cardForm)
		)
		
		// 2) （ ext.accEmail， accEmail）
		createDefaultCardForm.value.ext = {
		  ...(createDefaultCardForm.value.ext || {}),
		  accEmail: baseData.cardForm.accEmail ?? baseData.cardForm.accEmail ?? ''
		}
		const res = await setBankCard(createDefaultCardForm.value)
		if (res.code == 0) {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
			goWithdraw()
		} else {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
		}
	}

	const goWithdraw = () => {
		uni.reLaunch({
			url: '/pages/withdraw/index',
		})
	}
	const getCard = async () => {
		const ress = await bankCardInfo({country:3,platform:baseData.cardForm.platform})
		if (ress.code == 0) {
			baseData.cardForm = ress.data.length > 0 ? ress.data[0] : {
				ifsc: null,
				holder_name: null,
				account_num: null,
			},
			baseData.cardForm.platform=uni.getStorageSync('platform');
			baseData.cardForm.ext = baseData.cardForm.ext || {};
			baseData.cardForm.accEmail = baseData.cardForm.ext.accEmail ?? '';
			const ifscCode = baseData.cardForm.ifsc;
			if(ifscCode!==null){
				baseData.cardForm.ifsc = getBankLabel(ifscCode);
			}
		}
	}
	onMounted(() => {
		
		uni.setNavigationBarTitle({
			title: 'Quovo ' + t('Earn money so easy') + '!' // 
		});
		baseData.cardForm.platform=uni.getStorageSync('platform');
		getCard();
	});
</script>

<style lang="scss" scoped>
	
	.content {
		width: 100%;
		background: #F1F1EF;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.body {
		width: 100%;
		min-height: 100vh;
		background: #f7f7f7;
	}

	.top {
		border-radius: 1.4rem 1.4rem 0 0;
		// padding: 3rem 3vw 0.6rem 3vw;
		padding-top: 50px;
		// background: linear-gradient(to right, #FE8400, #FF5800);
		background: #ffffff;
		;
		background-size: 100% 130%;
		display: flex;
		flex-flow: column;
	}

	
	.custom-input {
		width: 100%;
		border: none;
		color: #333;
		box-shadow: none;
		outline: none;
	}

	.custom-input:focus {
		border-bottom: 2px solid #ff5800;
	}




	
	.bank-select-container {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.bank-label {
		flex-shrink: 0;
	}

	.bank-dropdown {
		flex: 1;
		text-align: right;
	}
  
  
  .bank-popup {
    background: #fff;
    padding-bottom: 20px;
  }
  
  .bank-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
  }
  
  .bank-popup-title {
    font-size: 16px;
    font-weight: 500;
  }
  
  .bank-list {
    max-height: 60vh;
  }
  
  .bank-item {
    padding: 15px 20px;
    border-bottom: 1px solid #f5f5f5;
  }
  
  .bank-item:active {
    background-color: #f0f0f0;
  }
  		.custom-width-bottom{
  		 width: var(--uni-app-max-width);
  		  left: auto !important;
  		  right: auto !important;
  		}

</style>